<template>
    <DocumentEditor 
        id="docEditor" 
        ref="docEditor"
        documentServerUrl="http://152.136.68.93:7070"
        :config="config"
        :events_onDocumentReady="onDocumentReady"
        class="only-office"
    /> 
</template>

<script setup>
    import { DocumentEditor } from "@onlyoffice/document-editor-vue";
    import { onBeforeMount, onMounted, ref } from "vue";
    import { LoginStore } from '@/store/login';
    import { storeToRefs } from "pinia";

    const wordUrl = 'http://192.168.104.30:8888/download';
    const wordUrl1 = "https://windtiktok.oss-cn-beijing.aliyuncs.com/%E6%99%BA%E8%83%BD%E6%96%87%E6%A1%A3%E6%96%87%E4%BB%B6%E4%B8%8B%E5%8F%91%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3.docx";
    const wordUrl2 = 'http://10.7.114.112:31984/ms-doc/api/v1/idoc-file/download-simple?id=1160598133797957633&appId=1009549605007003648';

    const callbackUrl = 'http://192.168.104.30:8888/call-only-office';

    const loginRef = storeToRefs(LoginStore());

    const userInfo = ref({});

    const docEditor = ref();

    onBeforeMount(() => {
        userInfo.value = loginRef.getInfo.value;
        config.value.editorConfig.user = loginRef.getInfo.value;
        console.log(config.value);
    });

    // 提及用户
    const requestUsers = () => {
        console.log("被提及了");
        console.log(docEditor);
        docEditor.setUsers({
            c: 'mention',
            users: [
                {
                    name: "John Smith"
                },
                {
                    name: "Kate Cage"
                }
            ]
        });
    }

    // 文件比较
    const compareFile = () => {

        console.log("比对文件");

        // docEditor.setRevisedFile({
        //     "fileType": "docx",
        //     "url": "https://example.com/url-to-example-document.docx"
        // });
    }
    
    // 高度
    const height = window.innerHeight - 18;

    const config = ref({
        document: {
            fileType: "docx",
            key: "Khsir99sdsdrTev1sdPdfsd7",
            permissions: {
                comment: true,
                copy: true,
                download: false,
                edit: true,
                print: false,
                review: false,
            },
            title: "测试.docx",
            url: wordUrl1
        },
        documentType: "word",
        editorConfig: {
            // callbackUrl: callbackUrl,
            customization: {
                autosave: false,
                comments: true,
                // 自定义信息
                customer: {
                    address: "陕西-西安",
                    info: "东华",
                    logo: "https://example.com/logo-big.png",
                    logoDark: "https://example.com/dark-logo-big.png",
                    mail: "john@example.com",
                    name: "John Smith and Co.",
                    phone: "123456789",
                    www: "example.com"
                },
                forcesave: true,          
                lang: "zh-CN",
                location: "zh",
                mode: "edit",
                review: {
                    hideReviewDisplay: false,
                    showReviewChanges: true,
                    reviewDisplay: "original",
                    trackChanges: false,
                    hoverMode: false
                },
            },
            coEditing: {
                mode: "fast", // 自动模式
                // mode: 'strict', // 手动模式
                change: true
            },
            lang: "zh-CN",
        },
        events: {
            onRequestSelectDocument: compareFile
        },
        height: height,
        type: "desktop",
        width: "100%"
    });

    // 文档加载钩子
    const coonDocumentReady = () => {
        console.log("正在加载only-office。。。");
    };

    // 文档修改钩子
    const documentStateChange = () => {
        console.log("文件被修改了");
    }

    // only-office 初始化钩子
    const onAppReady = () => {
        console.log("正在初始化only-office");
    }



</script>

<style scoped>
    .only-office {
        height: 100vh; 
    }
</style>